<script setup>
import {
  UserFilled,
  CaretBottom,
  User,
  Edit,
  SwitchButton,
  Lock
} from '@element-plus/icons-vue'
import { ref } from 'vue'
import { userStore } from '../stores'
import router from '../router'
const userstore = userStore()
const userInfo = userstore.getUserInfo()
//退出登陆
const exit = (command) => {
  if (command == 'exit') {
    userstore.removeToken()
    router.push('/user/login')
  }
}
</script>
<template>
  <el-row :gutter="10">
    <el-col :span="3">
      <span>用户：{{ userInfo.name ? userInfo.name : userInfo.username }}</span>
    </el-col>
    <el-col :span="3"> </el-col>
    <el-col :span="3"> </el-col>
    <el-col :span="3"> </el-col>
    <el-col :span="3"> </el-col>
    <el-col :span="3"> </el-col>
    <el-col :span="4"> </el-col>
    <el-col :span="2"
      ><el-dropdown @command="exit">
        <span class="el-dropdown-link">
          <el-avatar :icon="UserFilled" v-if="!userInfo.avatar" />
          <el-avatar :src="userInfo.avatar" v-else />
          <el-icon color="#999">
            <CaretBottom />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item
              ><el-link href="/personal" :underline="false"
                ><el-icon><User /></el-icon>个人信息</el-link
              ></el-dropdown-item
            >
            <el-dropdown-item
              ><el-icon><Edit /></el-icon>修改信息</el-dropdown-item
            >
            <el-dropdown-item
              ><el-icon><Lock /></el-icon>修改密码</el-dropdown-item
            >
            <el-dropdown-item command="exit"
              ><el-icon><SwitchButton /></el-icon>退出</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
</template>
<style lang="css" scoped>
* {
  border: 0;
  margin: 0;
  padding: 0;
}
.username {
  margin-right: 500px;
}
.el-col {
  /* background-color: aqua; */
  width: 100%;
  height: 100%;
  line-height: 60px;
}
.el-dropdown-link {
  margin-top: 10px;
  border: 0;
}
</style>
